<template>
    <div>
        <div class="mine_top_bg">
            <div>
                <img class="mine_png" :src="$store.state.logo1" alt="">
                <div style="margin-top: .1rem">账号：{{$cookies.get('user').mail}}</div>
<!--                <div v-if="user.status == 1">-->
<!--                    <p><img class="user_auth" src="@/assets/img/m/userAuth.png" alt=""> 已通过认证</p>-->
<!--                </div>-->
<!--                <router-link to="/m/approve" v-else-if="user.status == 0">-->
<!--                        <mt-button><img class="user_auth" src="@/assets/img/m/userAuthNo.png" alt=""> 未通过认证</mt-button>-->
<!--                </router-link>-->
<!--                <router-link to="/m/approve" v-else-if="user.status == 2">-->
<!--                    <mt-button><img class="user_auth" src="@/assets/img/m/userAuthNo.png" alt=""> 认证失败，请重新认证</mt-button>-->
<!--                </router-link>-->
            </div>
        </div>
        <div class="h100"></div>
        <div class="mine_list">
            <mt-cell title="修改密码" to="/m/password" is-link></mt-cell>
<!--            <mt-cell title="语言设置" to="/m/language" is-link value="简体中文"></mt-cell>-->
<!--            <mt-cell title="邀请好友" to="/m/friends" is-link></mt-cell>-->
            <template>
                <mt-button size="large" title="退出登录" @click.native="requestLoginOut">退出登录</mt-button>
            </template>
        </div>
    </div>
</template>

<script>
    // import Cookies

    export default {
        name: "Mine",
        data() {
            return {
                user: {}
            }
        },
        mounted(){
            this.user = this.$cookies.get('user');
        },
        methods: {
            requestLoginOut() {
                this.$cookies.remove('sid');
                this.$cookies.remove('user');
                this.$router.push('/m/home');
                this.requestAxios.requestWeb('post', '/api/logout.do', null, () => {
                });
            },
        }
    }
</script>

<style>
    .mine_top_bg {
        height: 2.2rem;
        background: linear-gradient(#e47307, #dc5405);
        position: relative;
        border-bottom-left-radius: .5rem;
        border-bottom-right-radius: .5rem;
    }

    .mine_top_bg > div {
        position: absolute;
        left: 50%;
        top: 100%;
        transform: translate(-50%, -50%);
        z-index: 999;
        width: 90%;
        background: #fff;
        text-align: center;
        border-radius: .2rem;
        padding: .8rem 0 .5rem 0;
        box-shadow: 0 0 10px #d3cdc7;
    }

    .mine_top_bg .mine_png {
        width: 80px;
        position: absolute;
        left: 50%;
        top: 0%;
        transform: translate(-50%, -50%);
        z-index: 999;
    }

    .user_auth{
        width: .35rem;
        height: .35rem;
    }

    .mine_top_bg .mint-button{
        margin-top: .3rem;
        background: linear-gradient(#fa9629,#d95000);
        font-size: .25rem;
        color:#fff;
        height: .55rem;
        padding: 0 .5rem;
        border-radius: .3rem;
    }

    .mine_top_bg .mint-button img{
        width: .3rem;
        height: .3rem;
    }
    .mine_top_bg p{
        margin-top: .3rem!important;
        color:#4ac260;
    }


    .mine_list{
        padding:0 .3rem;

    }

    .mine_list .mint-cell{
        border-bottom:1px solid #eee;
        background: #f9f9f9;
    }

    .mine_list .mint-cell-text{
        font-size: .3rem;
    }
    .mine_list .mint-cell-value{
        font-size: .3rem;
    }

    .mine_list .mint-button{
        margin-top: 1rem;
        color:#fff;
        font-size: .3rem;
        height:.65rem;
        background: linear-gradient(#f2696a,#d54545);
        border-radius: .2rem;
        box-shadow: 0 0 10px #dcdbdc;
    }


</style>
